added prismic x astro example. (#2247)

1 files changed, 26 insertions, 0 deletions

diff --git a/examples/cms-prismic/src/pages/blog/[...uid].astro b/examples/cms-prismic/src/pages/blog/[...uid].astro
new file mode 100644
index 000000000..2251366db
--- /dev/null
+++ b/examples/cms-prismic/src/pages/blog/[...uid].astro
@@ -0,0 +1,26 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro'
+import AsText from '@/components/Prismic/AsText.astro'
+import AsHTML from '@/components/Prismic/AsHTML.astro'
+import Date from '@/components/Prismic/Date.astro'
+import { initApi, Predicates } from '@/api/prismic.js'
+
+export async function getStaticPaths() {
+    const api = await initApi()
+    const { results } = await api.query(Predicates.at('document.type', 'blog_post'))
+    return results.map(post => ({ params: { uid: post.uid}, props: { post }}))
+}
+
+const { post } = Astro.props
+const { first_publication_date, data } = post
+---
+<BaseLayout>
+  <article class="box post">
+    { data.image && <a href={data.image.url} target="_blank" class="image featured"><img src={data.image.url} alt={data.image.alt} style="max-height: 550px; object-fit: cover; object-position: 50% 65%;" /></a> }
+    <header>
+      <h2><AsText data={data.title}/></h2>
+      <p><Date dateRaw={first_publication_date}/></p>
+    </header>
+    <AsHTML data={data.content}/>
+  </article>
+</BaseLayout>
\ No newline at end of file